<template>
  <j-modal :title="title" :width="800" :visible="visible" :confirmLoading="confirmLoading" switchFullscreen @ok="handleOk"
    @cancel="handleCancel" cancelText="关闭">

    <a-spin :spinning="confirmLoading">

      <a-form-model ref="form" :model="model" :rules="validatorRules">
        <a-form-item>
          <a-button type="primary" @click="addTagsGroup">添加标签组</a-button>
        </a-form-item>
        <a-form-item>

          <div class="tags">
            <div v-for="(tagItem, indexItem) in tagList" :key="indexItem">
              <div class="tagItemTitle">标签组{{ indexItem + 1 }}</div>
              <template v-for="(tag, index) in tagItem.tags">
                <a-tooltip v-if="tag.length > 20" :key="tag" :title="tag">
                  <a-tag :key="tag" :closable="true" @close="() => handleClose(tag, indexItem)">
                    {{ `${tag.slice(0, 20)}...` }}
                  </a-tag>
                </a-tooltip>
                <a-tag v-else :key="tag" :closable="true" @close="() => handleClose(tag, indexItem)">
                  {{ tag }}
                </a-tag>
              </template>

              <a-input v-if="tagItem.inputVisible" :ref="'input' + indexItem" type="text" size="small"
                :style="{ width: '78px' }" v-model="tagItem.inputValue" @blur="handleInputConfirm(indexItem)"
                @keyup.enter="handleInputConfirm(indexItem)" />
              <a-tag v-else style="background: #fff; borderStyle: dashed;" @click="showInput(indexItem)">
                <a-icon type="plus" /> New Tag
              </a-tag>
            </div>
          </div>
        </a-form-item>
      </a-form-model>
    </a-spin>
  </j-modal>
</template>

<script>
import { httpAction, getAction } from '@/api/manage'

import moment from "moment"

export default {
  name: "CategoryTagsDOModal",
  data() {
    return {

      tagList: [
        {
          tags: [],
          inputVisible: false,
          inputValue: '',
        }
      ],
      title: "操作",
      visible: false,
      model: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },

      confirmLoading: false,
      validatorRules: {
      },
      url: {
        listAll: "/admin/categoryTagsDO/listAll",
        set: "/admin/categoryTagsDO/setCategoryTag",
      },
    }
  },
  created() {
  },
  methods: {
    edit(record) {

      this.model = Object.assign({}, record);
      console.log(this.model)
      this.init();
      this.visible = true;
    },
    init() {
      let param = {
        categoryName: this.model.name
      }
      let httpurl = this.url.listAll;
      getAction(httpurl, param, 'get').then((res) => {
        this.tagList = [];
        if (res.success) {
          if (res.result && res.result.length > 0) {
            res.result.forEach(element => {
              let data = {
                tags: element.tags.split(","),
                inputVisible: false,
                inputValue: '',
              }
              this.tagList.push(data)
            });
          }
        }
      })
    },
    close() {
      this.$emit('close');
      this.visible = false;
      this.$refs.form.clearValidate();
    },
    handleOk() {
      const that = this;
      // 触发表单验证
      that.confirmLoading = true;
      let httpurl = this.url.set;
      let method = 'post';
      let tagArr = [];
      //筛选为空数组的标签组
      this.tagList = this.tagList.filter(function (item) {
        return item.tags.length > 0;
      });

      this.tagList.forEach(element => {
        tagArr.push(element.tags)
      });

      let param = {
        categoryName: this.model.name,
        tagList: tagArr,
      }
      httpAction(httpurl, param, method).then((res) => {
        if (res.success) {
          that.$message.success(res.message);
          that.$emit('ok');
        } else {
          that.$message.warning(res.message);
        }
      }).finally(() => {
        that.confirmLoading = false;
        that.close();
      })
    },
    handleCancel() {
      this.close()
    },

    handleClose(removedTag, indexItem) {
      const tags = this.tagList[indexItem].tags.filter(tag => tag !== removedTag);
      this.tagList[indexItem].tags = tags;
    },

    addTagsGroup() {
      let data = {
        tags: [],
        inputVisible: false,
        inputValue: '',
      }
      this.tagList.push(data);
    },
    showInput(indexItem) {
      this.tagList[indexItem].inputVisible = true;
      this.$nextTick(function () {
        this.$refs[`input${indexItem}`][0].focus();
      });
    },

    handleInputChange(e, indexItem) {
      this.tagList[indexItem].inputValue = e.target.value;
    },

    handleInputConfirm(indexItem) {
      const inputValue = this.tagList[indexItem].inputValue;
      if (inputValue && this.tagList[indexItem].tags.indexOf(inputValue) === -1) {
        this.tagList[indexItem].tags.push(inputValue);
        this.tagList[indexItem].inputVisible = false;
        this.tagList[indexItem].inputValue = '';
      }
      console.log(this.tagList)
    },

  }
}
</script>

<style lang="less" scoped>
.tagItemTitle {
  font-weight: bold;
  color: black;
}
</style>